<template>
  <div class="complaint-detail-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <span class="breadcrumb-item">首页</span> /
      <span class="breadcrumb-item">违规投诉</span> /
      <span class="breadcrumb-item active">违规投诉详情页</span>
    </div>
    <!-- 内容框 -->
    <div class="content-box">
      <h2 class="centered-title">{{ complaint.title }}</h2>
      <div class="meta-info-container">
        <p class="meta-info">发布时间: {{ complaint.creationDate }}</p>
      </div>
      <div class="status-container">
        <span style="color: #ffc107;">当前状态:</span>
        <span class="status-text" style="color: #ffc107;">{{ complaint.status }}</span>
      </div>
      <div class="complaint-info">
        <div class="info-item">
          <span>发生地:</span>
          <span>{{ complaint.location }}</span>
        </div>
        <div class="info-item">
          <span>污染企业:</span>
          <span>{{ complaint.companyName }}</span>
        </div>
        <div class="info-item">
          <span>详细位置:</span>
          <span>{{ complaint.detailLocation }}</span>
        </div>
        <div class="info-item">
          <span>污染类型:</span>
          <span>{{ complaint.pollutionType }}</span>
        </div>
        <div class="info-item">
          <span>投诉时间:</span>
          <span>{{ complaint.complaintTime }}</span>
        </div>
        <div class="info-item">
          <span>污染持续时间:</span>
          <span>{{ complaint.pollutionDuration }}</span>
        </div>
        <div class="info-item">
          <span>是否对政府公开联系方式:</span>
          <span>{{ complaint.isContactOpen }}</span>
        </div>
      </div>
      <div class="attachment-container" v-if="complaint.attachmentUrl">
        <a :href="complaint.attachmentUrl" download>
          <span class="attachment-icon"></span>
          <span>附件: {{ complaint.attachmentName }}</span>
        </a>
      </div>
      <div class="description-container">
        <h3>详情描述</h3>
        <div class="description-item">
          <span>违法行为:</span>
          <p>(1) 项目在未履行国土、环保审批手续的情况下未批先建。破坏农田、林地、草原，严重损害当地生态环境。</p>
          <p>(2) 现场执行环保标准不规范。管沟和顶管基坑不执行分层开挖制度。表层土和底层土无序堆放，使回填后无法保持植物生长原有的生活环境，水土流失严重，无防扬尘措施，较去年同期环境空气有明显变化。</p>
        </div>
        <div class="description-item">
          <span>预期解决:</span>
          <p>(1) 相关部门依据相关法律法规停止该项目违法行为，坚决整改，符合国家环保和土地法规后再进行施工。</p>
          <p>(2) 当地政府及司法部门履职到位，对之前违法事件进行处罚及诉讼，避免此类事件发生，使环保监管不流于表面，坚持 “零容忍” 的态度依法查处违法行为，拒绝盲目发展。</p>
        </div>
      </div>
      <div class="back-button-container">
        <button @click="goBack">返回</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const complaintId = computed(() => parseInt(route.params.id));

const complaint = computed(() => {
    return {
        id: complaintId.value,
        title: '古浪-河口天然气联络管道工程施工第二标段位于甘肃省兰州市永登县、西固区境内',
        creationDate: '2023年04月13日',
        location: '甘肃省-兰州市-永登县',
        companyName: '中油（新疆）石油工程有限公司',
        detailLocation: '兰州市永登县终点为西固区',
        pollutionType: '生态破坏',
        complaintTime: '2023-04-06',
        pollutionDuration: '1年以下',
        isContactOpen: '否',
        attachmentUrl: 'path/to/attachment.pdf', 
        attachmentName: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目附件',
        illegalActs: '(1) 项目在未履行国土、环保审批手续的情况下未批先建。破坏农田、林地、草原，严重损害当地生态环境。\n(2) 现场执行环保标准不规范。管沟和顶管基坑不执行分层开挖制度。表层土和底层土无序堆放，使回填后无法保持植物生长原有的生活环境，水土流失严重，无防扬尘措施，较去年同期环境空气有明显变化。',
        expectedSolution: '(1) 相关部门依据相关法律法规停止该项目违法行为，坚决整改，符合国家环保和土地法规后再进行施工。\n(2) 当地政府及司法部门履职到位，对之前违法事件进行处罚及诉讼，避免此类事件发生，使环保监管不流于表面，坚持 “零容忍” 的态度依法查处违法行为，拒绝盲目发展。',
        status: '审核通过，等待转办'
    };
});

const goBack = () => {
    router.push('/wgts');
};
</script>

<style scoped>
.complaint-detail-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.breadcrumb-container {
    margin-bottom: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.breadcrumb-item {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
.breadcrumb-item.active {
    color: #333;
    font-weight: 600;
}
.content-box {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.centered-title {
    text-align: center;
    margin-bottom: 20px;
}
.meta-info-container {
    text-align: center;
    margin-bottom: 10px;
}
.meta-info {
    color: #666;
}
.status-container {
    text-align: right;
    margin-bottom: 20px; 
}
.status-text {
    font-weight: 500;
}
.complaint-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}
.info-item {
    flex: 1 1 300px;
    display: flex;
    gap: 10px;
}
.attachment-container {
    margin-bottom: 20px;
    text-align: left; 
}
.attachment-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #007bff;
    margin-right: 5px;
}
.description-container {
    margin-bottom: 20px;
    text-align: left; 
}
.description-item {
    margin-bottom: 10px;
}
.back-button-container {
    text-align: right;
    margin-top: 20px;
}
</style>